var app = new Vue({
        el: '#app',
        data: {
            list: [],
            list2:[],
            isBg:false,
            activeIndex: false,
            activeIndex2: false,
            listMove: false,
            list2Move: false,
            list3Move: false
        },
        created:()=>{

        axios.get('/db.json').then(function(response) {
        app.$data.list = response.data.list

    })
},
//数据改变时候的钩子函数
updated:function() {
    var list1 = document.querySelector(".list_l1")
    var list2 = document.querySelector(".list_l2")
    var bgstyle = document.querySelector(".bgstyle")
    var liststyle = document.querySelector(".liststyle")
    var list3l = document.querySelector(".list_l3_left")
    var list3r = document.querySelector(".list_l3_right")
    if (list1) list1.style.height = this.listHeight+'px'
    if (list2) list2.style.height = this.listHeight+'px'
    if (bgstyle) bgstyle.style.height = this.listHeight+'px'
    if (liststyle) liststyle.style.height = this.listHeight+'px'
    if (list3l) list3l.style.height = this.listHeight+'px'
    if (list3r) list3r.style.height = this.listHeight+'px'

},
methods: {
    tagIndex: function(index) {
        if (index==false) {
            if (this.list2Move = true) {

            }else{
                this.activeIndex = index
                this.list2Move = index
            }
        }else{
            this.activeIndex = index
            this.list2Move = index
        }

    },
    tagIndex2: function(index) {
        this.activeIndex2 = index
        this.list3Move = index
    },
    taglist2: function(index) {
        var bg = this.list[index].list.bg||false
        if (bg) {
            this.list2 = this.list[index].list.div
            this.isBg = true
        }else{
            this.isBg = false
            this.list2 = this.list[index].list.ul
        }
        this.activeIndex = index
    },
    moveout() {
        this.activeIndex = false
        if (this.list3Move) {
            this.list3Move = false;
            var that = this
            setTimeout(function(){
                that.list2Move = false;
            }, 200);
            setTimeout(function(){
                that.listMove = false;
            }, 400);
        }else if (this.list2Move) {
            this.list2Move = false;
            var that = this
            setTimeout(function(){
                that.listMove = false;
            }, 200);

        }else{
            this.listMove = false;
        }
    }
},
computed: {
    listHeight: function () {
        return window.innerHeight-60
    }
}

})






$(function() {





    $('.list').on('mouseenter',function() {
        $('.nav').css({
            "backgroundColor": "#373d41",
            "borderBottom": "none"
        })
        $('.list').stop().css({
            "display":"inline-block",
            'left': 0
        })
    }).on('mouseleave',function() {
        $('.nav').css({
            "backgroundColor": "",
            "borderBottom": "1px rgba(255, 255, 255, 0.15) solid"
        })
        $(".list").animate({left:"-200px"},function() {
            $('.list').css("display","none")
        })

    })





})